
function createElm(vnode) {
    let { tag, data, children, text, comment } = vnode;

    if (typeof tag === "string") { // 标签
        // 将真实节点与虚拟节点进行绑定，后续修改属性可以直接找到对应的真实节点进行修改
        vnode.el = document.createElement(tag);

        // 处理属性
        patchProps(vnode.el, data);

        // 处理子节点
        children.forEach(child => {
            // 递归创建子节点，将子节点插入到父节点下
            vnode.el.appendChild(createElm(child));
        })
    } else if (typeof comment === 'string') { // 注释
        vnode.el = document.createComment(comment);
    } else { // 文本
        vnode.el = document.createTextNode(text);
    }

    return vnode.el;
}

function patchProps(el, props) {
    for (let key in props) {
        switch (key) {
            // style: { code: 'red' }
            case "style":
                for (let styleKey in props.style) {
                    el.style[styleKey] = props.style[styleKey];
                }
                break;
            default:
                el.setAttribute(key, props[key]);
                break;
        }
    }
}

export function patch(oldVnode, newVnode) {
    //  判断是否是一个真是的dom元素
    const isRealElement = oldVnode.nodeType;

    if (isRealElement) { // 初始渲染
        // 获取真实节点
        const elm = oldVnode;

        // 获取父节点
        const parentElm = elm.parentNode;

        // 根据虚拟节点创建真实节点
        const newElm = createElm(newVnode);

        // 将创建的真实节与模板节点进行替换
        parentElm.replaceChild(newElm, elm);

        return newElm;
    } else { // diff 算法

    }
}